<template>
	<view class="chat-container">
		<!-- 状态栏预留区域 -->
		<view class="status-bar"></view>

		<!-- 聊天头部导航 -->
		<view class="chat-header">
			<view class="header-btn" @click="goBack">
				<image class="btn-icon" src="/static/Back.png"></image>
			</view>
			<view class="text">{{ pageTitle }}</view>
			<view class="header-btn right-header-btn" @click="toggleSettingPanel">
				<image class="btn-icon" src="/static/setting.png"></image>
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 聊天消息区域 -->
			<scroll-view class="chat-messages" scroll-y="true" :scroll-top="y" scroll-with-animation="true">
				<view v-for="(message, index) in messages" :key="index" :id="'message-' + index" class="message-wrapper"
					:class="{ 'self-message': message.isSelf }">
					<view class="message-avatar">
						<image class="avatar-icon" :src="message.isSelf ? '/static/image5.png' : '/static/image4.png'"
							mode="aspectFill">
						</image>
					</view>

					<!-- 图片消息容器 -->
					<view v-if="message.type === 'image'" class="image-message-container"
						:class="{ 'self-image': message.isSelf }">
						<image class="image-message" :src="message.content"></image>
						<text class="message-time">{{ message.time }}</text>
					</view>

					<!-- 视频消息容器 -->
					<view v-else-if="message.type === 'video'" class="video-message-container"
						:class="{ 'self-video': message.isSelf }">
						<video class="video-message" :src="message.content" controls></video>
						<text class="message-time">{{ message.time }}</text>
					</view>

					<!-- 文本消息容器 -->
					<view v-else class="message-content" :class="{ 'self-content': message.isSelf }">
						<markdownview class="text-message" :markdown="message.content"></markdownview>
						<!-- <text class="text-message">{{ message.content }}</text> -->
						<text class="message-time">{{ message.time }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 输入区域 -->
			<view class="input-area">
				<view class="media-buttons">
					<view class="media-btn" @click="showImagePanel">
						<image class="media-icon" src="/static/1.png"></image>
					</view>
					<view class="media-btn" @click="showVideoPanel">
						<image class="media-icon" src="/static/2.png"></image>
					</view>
				</view>
				<view class="input-wrapper">
					<textarea class="input-field" placeholder="请输入消息..." v-model="inputContent"
						@input="autoResize"></textarea>
				</view>
				<view class="send-button" @click="sendMessage" :class="{ 'disabled': !inputContent.trim() }">
					<text class="send-text">发送</text>
				</view>
			</view>
		</view>

		<!-- 右侧设置面板 -->
		<view class="setting-panel" :class="{ 'show': isSettingPanelShow }">
			<view class="panel-header">
				<text class="panel-title">{{ currentPanelTitle }}</text>
				<view class="close-btn" @click="closePanelOrBack">×</view>
			</view>
			<view class="panel-content">
				<!-- 如果在根级显示对话场景，否则显示历史记录 -->
				<template v-if="!currentScene">
					<!-- 对话场景板块 -->
					<view class="panel-section">
						<text class="section-title">选择对话场景</text>
						<view class="scene-list">
							<view class="scene-item" @click="showSceneHistories('medical', 1)">
								<text class="scene-text">医疗咨询</text>
							</view>
							<view class="scene-item" @click="showSceneHistories('finance', 2)">
								<text class="scene-text">金融服务</text>
							</view>
							<view class="scene-item" @click="showSceneHistories('law', 3)">
								<text class="scene-text">法律咨询</text>
							</view>
							<view class="scene-item" @click="showSceneHistories('education', 4)">
								<text class="scene-text">教育辅导</text>
							</view>
							<view class="scene-item" @click="showSceneHistories('travel', 5)">
								<text class="scene-text">旅游规划</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<!-- 历史记录列表 -->
					<view class="back-button" @click="backToSceneList">
						<image class="back-icon" src="/static/Back.png"></image>
						<text class="back-text">返回场景列表</text>
					</view>
					<view class="panel-section">
						<text class="section-title">{{ currentSceneName }} - 历史记录</text>
						<view v-if="sceneHistories.length > 0" class="history-list">
							<view v-for="(history, index) in sceneHistories" :key="index" class="history-item"
								@click="loadHistoryChats(history.theme_id)">
								<text class="history-title">{{ history.theme_name || '未命名对话' }}</text>
								<text class="history-time">{{ formatHistoryTime(history.last_message_time) }}</text>
							</view>
						</view>
						<view v-else class="empty-history">
							<text>暂无历史记录</text>
						</view>
						<!-- 创建新对话按钮 -->
						<view class="new-chat-button" @click="createNewChat">
							<text>开始新对话</text>
						</view>
					</view>
				</template>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" v-if="isSettingPanelShow || isMediaPanelShow" @click="closeAllPanels"></view>

		<!-- 媒体选择面板 -->
		<view class="media-panel" :class="{ 'show': isMediaPanelShow }">
			<view class="panel-header">
				<text class="panel-title">{{ mediaPanelTitle }}</text>
				<view class="close-btn" @click="closeAllPanels">×</view>
			</view>
			<view class="panel-content">
				<view class="media-option" @click="chooseFromAlbum">
					<text class="option-text">选择本地{{ mediaPanelType }}</text>
				</view>
				<view class="media-option" @click="openCamera">
					<text class="option-text">打开摄像头</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import markdownview from "@/uni_modules/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue"
	export default {
		components: {
			markdownview
		},
		// 同时在data()中添加currentThemeName属性
		data() {
			return {
				pageTitle: 'AI对话', // 初始标题
				messages: [],
				inputContent: '',
				scrollToView: '',
				y: 9999999999, // 初始化为一个大值
				inputHeight: 80,
				isSettingPanelShow: true, // 修改为true，页面加载时自动显示设置面板
				currentScene: '',
				currentSceneName: '',
				currentSceneId: 0,
				currentThemeId: 0,
				currentThemeName: null, // 添加这个属性
				currentPanelTitle: '设置',
				sceneHistories: [], // 存储当前场景的历史记录列表
				isMediaPanelShow: false, // 媒体选择面板显示状态
				mediaPanelType: '', // 媒体类型：图片或视频
				mediaPanelTitle: '' // 面板标题
			};
		},
		onLoad() {
			// 移除自动加载历史记录的代码
			// this.loadHistoryChats();
		},
		methods: {
			// 加载历史聊天记录
		loadHistoryChats(themeId = 0) {
			// 平滑关闭设置面板
			this.isSettingPanelShow = false;

			// 清空当前主题名称
			this.currentThemeName = null;

			// 构建请求URL，包含scene_id参数
			const url = `http://localhost:8080/chat/history?theme_id=${themeId}&scene_id=${this.currentSceneId}`;

			uni.request({
				url: url,
				method: 'GET',
				success: (res) => {
					if (res.data.success && res.data.history && res.data.history.length > 0) {
						// 格式化历史记录为前端需要的格式
						this.messages = res.data.history.map(item => ({
							type: item.message_type,
							content: item.content,
							isSelf: item.identity === 'user',
							time: item.created_at.split(' ')[1].substr(0, 5) // 提取时间部分
						}));

						// 设置主题名称和ID
						const firstMessage = res.data.history[0];
						if (firstMessage) {
							this.currentThemeName = firstMessage.theme_name;
							this.currentThemeId = firstMessage.theme_id;
							this.pageTitle = `AI对话 - ${this.currentThemeName || this.currentSceneName}`;
						}

						this.scrollToBottom();
					} else {
						// 清空消息列表
						this.messages = [];
						uni.showToast({
							title: '没有找到历史记录',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('加载历史记录失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 切换设置面板显示/隐藏
			toggleSettingPanel() {
				this.isSettingPanelShow = !this.isSettingPanelShow;
			},

			// 显示场景的历史记录列表
			showSceneHistories(scene, sceneId) {
				this.currentScene = scene;
				this.currentSceneId = sceneId;
				let sceneName = '';
				switch (scene) {
					case 'medical':
						sceneName = '医疗咨询';
						break;
					case 'finance':
						sceneName = '金融服务';
						break;
					case 'law':
						sceneName = '法律咨询';
						break;
					case 'education':
						sceneName = '教育辅导';
						break;
					case 'travel':
						sceneName = '旅游规划';
						break;
				}
				this.currentSceneName = sceneName;
				this.currentPanelTitle = sceneName;
				this.currentThemeId = 0;
				this.loadSceneHistories(sceneId);
			},

			// 加载场景的历史记录列表
			loadSceneHistories(sceneId) {
				uni.request({
					url: `http://localhost:8080/chat/scene_histories?scene_id=${sceneId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.success && res.data.histories) {
							this.sceneHistories = res.data.histories;
						} else {
							this.sceneHistories = [];
						}
					},
					fail: (err) => {
						console.error('加载场景历史记录失败:', err);
					}
				});
			},

			// 返回场景列表
			backToSceneList() {
				this.currentScene = '';
				this.currentSceneName = '';
				this.currentSceneId = 0;
				this.currentPanelTitle = '设置';
				this.sceneHistories = [];
			},

			// 关闭面板或返回上一级
			closePanelOrBack() {
				if (this.currentScene) {
					this.backToSceneList();
				} else {
					this.isSettingPanelShow = false;
				}
			},

			// 创建新对话
			createNewChat() {
				this.pageTitle = `AI对话 - ${this.currentSceneName}`;
				this.messages = [];
				this.currentThemeId = 0;  // 确保新对话从主题ID 0开始
				this.currentThemeName = null;  // 清空主题名称
				this.isSettingPanelShow = false;
			},

			// 格式化历史记录时间
			formatHistoryTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const now = new Date();
				const diffTime = Math.abs(now - date);
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
				if (diffDays === 1) return '昨天';
				else if (diffDays < 7) return `${diffDays}天前`;
				else if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`;
				else return `${date.getMonth() + 1}月${date.getDate()}日`;
			},

			// 滚动到底部方法
			scrollToBottom() {
				this.$nextTick(() => {
					this.y = this.y + 1;
				});
			},

			// 发送消息
			sendMessage() {
				if (!this.inputContent.trim()) return;
				const now = new Date();
				const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
				const newMessage = {
					type: 'text',
					content: this.inputContent,
					isSelf: true,
					time: time
				};
				this.messages.push(newMessage);
				this.inputContent = '';
				this.inputHeight = 80;
				this.scrollToBottom();
				const isFirstMessage = this.messages.length === 1;
				uni.request({
					url: 'http://localhost:8080/chat/send',
					method: 'POST',
					data: {
						identity: 'user',
						content: newMessage.content,
						theme_id: this.currentThemeId,
						theme_name: this.currentThemeName,
						message_type: 'text',
						is_first_message: isFirstMessage,
						scene_id: this.currentSceneId
					},
					success: (res) => {
						if (res.data.success) {
							// 更新主题名称（如果是新生成的）
							if (res.data.theme_name) {
								this.currentThemeName = res.data.theme_name;
								this.currentThemeId = res.data.theme_id; // 保存主题ID
								this.pageTitle = `AI对话 - ${res.data.theme_name}`;
							}

							// 添加AI回复
							const aiReply = {
								type: 'text',
								content: res.data.ai_response,
								isSelf: false,
								time: time
							};
							this.messages.push(aiReply);
							this.scrollToBottom();
						} else {
							uni.showToast({
								title: '发送消息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('网络请求失败:', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 切换设置面板显示/隐藏
			toggleSettingPanel() {
				this.isSettingPanelShow = !this.isSettingPanelShow;
			},

			// 显示场景的历史记录列表
			showSceneHistories(scene, sceneId) {
				this.currentScene = scene;
				this.currentSceneId = sceneId;
				let sceneName = '';
				switch (scene) {
					case 'medical':
						sceneName = '医疗咨询';
						break;
					case 'finance':
						sceneName = '金融服务';
						break;
					case 'law':
						sceneName = '法律咨询';
						break;
					case 'education':
						sceneName = '教育辅导';
						break;
					case 'travel':
						sceneName = '旅游规划';
						break;
				}
				this.currentSceneName = sceneName;
				this.currentPanelTitle = sceneName;
				this.currentThemeId = 0;

				// 加载该场景下的所有历史记录
				this.loadSceneHistories(sceneId);
			},

			// 加载场景的历史记录列表
			loadSceneHistories(sceneId) {
				uni.request({
					url: `http://localhost:8080/chat/scene_history?scene_id=${sceneId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.success && res.data.histories) {
							this.sceneHistories = res.data.histories;
						} else {
							this.sceneHistories = [];
						}
					},
					fail: (err) => {
						console.error('加载场景历史记录失败:', err);
					}
				});
			},

			// 返回场景列表
			backToSceneList() {
				this.currentScene = '';
				this.currentSceneName = '';
				this.currentSceneId = 0;
				this.currentPanelTitle = '设置';
				this.sceneHistories = [];
			},

			// 关闭面板或返回上一级
			closePanelOrBack() {
				if (this.currentScene) {
					this.backToSceneList();
				} else {
					this.isSettingPanelShow = false;
				}
			},

			// 创建新对话
			createNewChat() {
				// 创建一个新的对话主题
				this.pageTitle = `AI对话 - ${this.currentSceneName}`;
				this.messages = [];
				this.currentThemeId = 0;
				this.isSettingPanelShow = false;
			},

			// 格式化历史记录时间
			formatHistoryTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const now = new Date();
				const diffTime = Math.abs(now - date);
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

				if (diffDays === 1) {
					return '昨天';
				} else if (diffDays < 7) {
					return `${diffDays}天前`;
				} else if (diffDays < 30) {
					return `${Math.floor(diffDays / 7)}周前`;
				} else {
					return `${date.getMonth() + 1}月${date.getDate()}日`;
				}
			},

			// 滚动到底部方法
			scrollToBottom() {
				// 等待DOM更新
				this.$nextTick(() => {
					// 通过增加y的值来触发滚动到底部
					this.y = this.y + 1;
				});
			},

			// 发送消息
			sendMessage() {
				if (!this.inputContent.trim()) return;

				const now = new Date();
				const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;

				const newMessage = {
					type: 'text',
					content: this.inputContent,
					isSelf: true,
					time: time
				};

				this.messages.push(newMessage);
				this.inputContent = '';
				this.inputHeight = 80;

				// 滚动到最新消息
				this.scrollToBottom();

				// 检查是否是第一条消息
				const isFirstMessage = this.messages.length === 1;

				// 发送消息到服务器
				uni.request({
					url: 'http://localhost:8080/chat/send',
					method: 'POST',
					data: {
						identity: 'user',
						content: newMessage.content,
						theme_id: this.currentThemeId,
						theme_name: this.currentThemeName,
						message_type: 'text',
						is_first_message: isFirstMessage,
						scene_id: this.currentSceneId
					},
					success: (res) => {
						if (res.data.success) {
							// 更新主题名称和ID（如果是新生成的）
							if (res.data.theme_name) {
								this.currentThemeName = res.data.theme_name;
								this.currentThemeId = res.data.theme_id; // 保存主题ID
								this.pageTitle = `AI对话 - ${res.data.theme_name}`;
							}

							// 添加AI回复
							const aiReply = {
								type: 'text',
								content: res.data.ai_response,
								isSelf: false,
								time: time
							};
							this.messages.push(aiReply);
							this.scrollToBottom();
						} else {
							uni.showToast({
								title: '发送消息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('网络请求失败:', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},

			// 关闭所有面板
			closeAllPanels() {
				this.isSettingPanelShow = false;
				this.isMediaPanelShow = false;
			},

			// 显示图片选择面板
			showImagePanel() {
				this.mediaPanelType = '图片';
				this.mediaPanelTitle = '图片选择';
				this.isMediaPanelShow = true;
			},

			// 显示视频选择面板
			showVideoPanel() {
				this.mediaPanelType = '视频';
				this.mediaPanelTitle = '视频选择';
				this.isMediaPanelShow = true;
			},

			// 从相册选择
			chooseFromAlbum() {
				if (this.mediaPanelType === '图片') {
					this.selectImage();
				} else {
					this.selectVideo();
				}
				this.isMediaPanelShow = false;
			},

			// 打开摄像头
			openCamera() {
				if (this.mediaPanelType === '图片') {
					// 打开摄像头拍照
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (res) => {
							const tempFilePath = res.tempFilePaths[0];
							this.uploadFile(tempFilePath, 'image');
						}
					});
				} else {
					// 打开摄像头录制视频
					uni.chooseVideo({
						sourceType: ['camera'],
						success: (res) => {
							const tempFilePath = res.tempFilePath;
							this.uploadFile(tempFilePath, 'video');
						}
					});
				}
				this.isMediaPanelShow = false;
			},

			// 选择图片
			selectImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadFile(tempFilePath, 'image');
					}
				});
			},

			// 选择视频
			selectVideo() {
				uni.chooseVideo({
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						this.uploadFile(tempFilePath, 'video');
					}
				});
			},

			// 上传文件
			uploadFile(filePath, fileType) {
				const now = new Date();
				const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;

				// 先显示本地文件
				const newMessage = {
					type: fileType,
					content: filePath,
					isSelf: true,
					time: time
				};

				this.messages.push(newMessage);
				this.scrollToBottom();

				// 上传文件到服务器
				uni.uploadFile({
					url: 'http://localhost:8080/chat/v5',
					filePath: filePath,
					name: 'face',
					success: (res) => {
						if (res.statusCode === 200) {
							const data = JSON.parse(res.data);
							if (data.url) {
								// 更新消息内容为服务器URL
								this.messages[this.messages.length - 1].content = data.url;

								// 发送消息记录到服务器
								uni.request({
									url: 'http://localhost:8080/chat/send',
									method: 'POST',
									data: {
									identity: 'user',
									content: data.url,
									theme_id: this.currentThemeId,
									theme_name: this.currentThemeName,
									message_type: fileType,
									scene_id: this.currentSceneId
								}
								});
							}
						}
					},
					fail: () => {
						uni.showToast({
							title: '文件上传失败',
							icon: 'none'
						});
						// 移除本地显示的消息
						this.messages.pop();
					}
				});
			},

			// 自动调整输入框高度
			autoResize(e) {
				const textarea = e.target;
				const height = textarea.scrollHeight;
				if (height > 80 && height < 200) {
					this.inputHeight = height;
				}
			}
		}
	};
</script>

<style scoped>
	/* 状态栏高度预留 */
	.status-bar {
		height: var(--status-bar-height);
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
	}

	/* 聊天容器 - 添加背景图片 */
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 聊天背景图片 - 请替换为实际路径 */
		background-image: url('/static/background.jpeg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		/* 添加此属性使背景固定 */
		position: relative;
	}

	/* 主内容区域 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		transition: transform 0.3s ease;
		margin-top: calc(var(--status-bar-height) + 90rpx);
		margin-bottom: 140rpx;
		width: 100%;
		/* 确保主内容区域宽度为100% */
		box-sizing: border-box;
		/* 确保内边距不会增加总宽度 */
	}

	/* 聊天头部 */
	.chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		padding: 0 20rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		right: 0;
		z-index: 20;
	}

	.text {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		flex: 1;
		margin: 0 20rpx;
	}

	.header-btn {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 右侧头部按钮 - 用于设置图标 */
	.right-header-btn {
		margin-left: auto;
		/* 自动左边距，将按钮推到最右侧 */
	}

	.btn-icon {
		width: 48rpx;
		/* 从40rpx增加到48rpx，放大1.2倍 */
		height: 48rpx;
		/* 从40rpx增加到48rpx，放大1.2倍 */
	}

	/* 输入区域 */
	.input-area {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #eeeeee;
		z-index: 20;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.text {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		flex: 1;
		margin: 0 20rpx;
	}

	.header-btn {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 聊天消息区域 */
	.chat-messages {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
		background-color: rgba(255, 255, 255, 0.5);
		padding-bottom: 200rpx;
		background-image: url(/static/background.jpeg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: 100%;
		/* 确保消息区域宽度为100% */
		box-sizing: border-box;
		/* 确保内边距不会增加总宽度 */
	}

	.message-wrapper {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;
		/* 添加此属性，确保头像不会被拉伸 */
	}

	.self-message {
		flex-direction: row-reverse;
	}

	.message-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #cccccc;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		flex-shrink: 0;
		/* 添加此属性，确保头像不会被压缩 */
	}

	.avatar-icon {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 添加此属性，确保图片不变形 */
	}

	.self-message .message-avatar {
		margin-right: 0;
		margin-left: 20rpx;
	}

	.message-content {
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.self-content {
		background-color: #9EEA6A;
	}

	.text-message {
		font-size: 32rpx;
		line-height: 1.5;
		/* 添加以下属性确保显示的消息也能自动换行 */
		word-break: break-all;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}

	.image-message {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.video-message {
		width: 300rpx;
		height: 400rpx;
		border-radius: 10rpx;
	}

	.message-time {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	/* 输入区域 */
	.input-area {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #eeeeee;
		z-index: 10;
	}

	.media-buttons {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.media-btn {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}

	.media-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.input-wrapper {
		flex: 1;
		background-color: #f0f0f0;
		border-radius: 40rpx;
		padding: 0 20rpx;
	}

	.input-field {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border: none;
		background-color: transparent;
		resize: none;
		/* 添加以下属性确保连续数字或字母能够自动换行 */
		word-break: break-all;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}

	.send-button {
		width: 120rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007aff;
		color: #ffffff;
		border-radius: 40rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.send-button.disabled {
		background-color: #cccccc;
	}

	.send-text {
		color: #ffffff;
	}

	/* 新增图片消息容器样式 */
	.image-message-container {
		max-width: 600rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.self-image {
		margin-left: 0;
		margin-right: 20rpx;
	}

	/* 修改图片消息样式为长方形 */
	.image-message {
		width: 500rpx;
		/* 增加宽度 */
		height: 300rpx;
		/* 保持高度不变，形成长方形 */
		border-radius: 0;
		/* 移除圆角，变为长方形 */
	}

	/* 视频消息容器样式 */
	.video-message-container {
		max-width: 600rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.self-video {
		margin-left: 0;
		margin-right: 20rpx;
	}

	/* 修改视频消息样式 */
	.video-message {
		width: 500rpx;
		/* 增加宽度 */
		height: 300rpx;
		/* 调整高度，形成长方形 */
		border-radius: 0;
		/* 移除圆角，变为长方形 */
	}

	/* 右侧设置面板 */
	.setting-panel {
		position: fixed;
		top: 0;
		right: -80%;
		width: 80%;
		max-width: 300px;
		height: 100vh;
		background-color: #ffffff;
		box-shadow: -2rpx 0 10rpx rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease;
		z-index: 100;
	}

	/* 返回按钮样式 */
	.back-button {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.back-text {
		font-size: 32rpx;
		color: #333333;
	}

	/* 历史记录列表样式 */
	.history-list {
		margin-top: 20rpx;
	}

	.history-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		transition: background-color 0.2s;
	}

	.history-item:active {
		background-color: #e0e0e0;
	}

	.history-title {
		font-size: 32rpx;
		color: #333333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.history-time {
		font-size: 24rpx;
		color: #999999;
		margin-left: 20rpx;
	}

	/* 空历史记录提示 */
	.empty-history {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		color: #999999;
		font-size: 28rpx;
	}

	/* 创建新对话按钮 */
	.new-chat-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		margin-top: 40rpx;
		background-color: #007aff;
		color: #ffffff;
		border-radius: 10rpx;
		font-size: 32rpx;
	}

	.setting-panel.show {
		right: 0;
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		height: 90rpx;
		background-color: #f5f5f5;
		border-bottom: 1rpx solid #eeeeee;
	}

	.panel-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-btn {
		font-size: 40rpx;
		font-weight: bold;
		color: #666666;
	}

	.panel-content {
		padding: 30rpx;
	}

	.scene-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		transition: background-color 0.2s;
	}

	.scene-item:active {
		background-color: #e0e0e0;
	}

	.scene-text {
		font-size: 32rpx;
	}

	/* 遮罩层 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.15);
		z-index: 99;
	}

	/* 媒体选择面板 */
	.media-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 101;
		/* 提高z-index使其高于遮罩层 */
		opacity: 0;
		transform: translateY(100%);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	/* 显示媒体选择面板 */
	.media-panel.show {
		/* 显示状态：完全不透明且位于屏幕底部 */
		opacity: 1;
		transform: translateY(0);
	}

	.media-option {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		/* 调整为与场景面板相同的间距 */
		background-color: #f5f5f5;
		/* 改为与场景面板相同的背景色 */
		border-radius: 10rpx;
		transition: background-color 0.2s;
		/* 移除box-shadow过渡 */
		/* 移除额外的阴影效果 */
	}

	.media-option:active {
		background-color: #e0e0e0;
		/* 改为与场景面板相同的激活状态背景色 */
	}

	.option-text {
		font-size: 32rpx;
		/* 移除明确的文字颜色设置，使用默认黑色 */
	}

	/* 媒体按钮点击效果 */
	.media-btn:active {
		background-color: #e0e0e0;
		transform: scale(0.95);
		transition: all 0.1s;
	}

	/* 流式消息加载动画 */
	.loading-indicator {
		display: inline-block;
		margin-left: 10rpx;
	}

	.loading-dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #999;
		margin: 0 4rpx;
		animation: loading 1.4s infinite ease-in-out both;
	}

	.loading-dot:nth-child(1) {
		animation-delay: -0.32s;
	}

	.loading-dot:nth-child(2) {
		animation-delay: -0.16s;
	}

	@keyframes loading {
		0%, 80%, 100% {
			transform: scale(0);
		}
		40% {
			transform: scale(1);
		}
	}
</style>